<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      class Index extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            showBl: true,
            list: ["小明", "小猪", "小狗"],
            value: "",
          };
        }
        handleClick() {
          const { showBl } = this.state;
          this.setState({
            showBl: !showBl,
          });
        }
        handleChange(e) {
          const { value } = e.target;
          this.setState({ value });
        }
        handleAdd() {
          const { list, value } = this.state;
          if (!value) {
              return alert('请不要输入空值')
          }
          list.push(value);
          this.setState({ list, value: "" });
        }
        handleDel(i){
            const {list} = this.state;
            list.splice(i,1);
            this.setState({list})
        }
        render() {
          const { showBl, list, value } = this.state;
          return (
            <div>
              <input
                value={value}
                onChange={(e) => {
                  this.handleChange(e);
                }}
              />
              {showBl && (
                <ul>
                  {list.map((v,i) => {
                    return <li key={i}>{v} <span onClick={()=>{this.handleDel(i)}}>✖</span> </li>;
                  })}
                </ul>
              )}
              <button
                onClick={() => {
                  this.handleClick();
                }}
              >
                是否显示
              </button>
              <button
                onClick={() => {
                  this.handleAdd();
                }}
              >
                添加
              </button>
            </div>
          );
        }
      }

      ReactDOM.render(<Index />, document.getElementById("root"));
    </script>
  </body>
</html>
